<template>
  <div class="history-hot">
      <!-- 历史记录 -->
      <div class="hs" v-if="showhistory">
         <div class="header" >
             <h5>历史记录</h5>
             <!-- 删除图标 -->
             <van-icon name="delete" @click="dellist"/>
         </div>
         <!-- 下方标签 -->
         <div class="body">
               <van-tag  plain type="default" v-for="(item,index) in historyKeywordList"
               :key='index' @click="gosearch(item)">{{item}}</van-tag>
         </div>
      </div>
      <!-- 热门搜索 -->
       <div class="hs">
         <div class="header">
             <h5>热门搜索</h5>
         </div>
         <!-- 下方标签 -->
         <div class="body">
               <van-tag  plain :type="item.is_hot ? 'danger' : 'default'" v-for="(item,index) in hotKeywordList" 
               :key="index" @click="gosearch(item.keyword)">{{item.keyword}}</van-tag>
         </div>
      </div>
  </div>
</template>

<script> 
//   引入删除历史记录接口
  import {delhistory} from '@/api/search.js'
  export default {
    name:'',
    data () {
     return {
         showhistory:true, //判断是否展示历史数据
      };
    },
    props:['historyKeywordList','hotKeywordList'], //接受父传子数据
    methods:{
        dellist(){
            delhistory().then((res)=>{
             if(res.errno==0){
              this.$toast.success("删除成功"); //提示信息
              this.showhistory=false //改变显示状态
             }
            })
        },
        //定义父传子
        gosearch(val){
            //val为点击的搜索框
            this.$emit("getsearch",val)
        }
    }
  }

</script>
<style scoped lang='less'>
.history-hot {
  background: rgba(0, 0, 0, 0.3);
  flex: 1;
  .hs{
    background-color: #fff;
    padding: 2%;
    .header{
      padding-top: 2%;
      display: flex;
      justify-content: space-between;
       h5{
          font-size: 15px;
      }
      .van-icon{
          font-size: 16px;
      }
    }
    .body{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .van-tag{
        padding: 3px;
        margin: 0 2px;
      }
    }
  }
}
</style>